<template>
  <view>
    <cm-nav back>
      <template v-slot:center>绑定手机</template>
    </cm-nav>
    
    <view class="cm-padding-10">
      <view class="cm-flex cm-flex-a-center">
        <view class="cm-flex-g-1">
          <cm-input v-model="form.mobile" clearable @clear="form.mobile = ''"
            type="number" border="black" placeholder="请输入手机号">
            <view style="width: 50px;" class="cm-flex-s-0">手机号</view>
          </cm-input>
        </view>
        <view class="cm-flex-s-0 cm-margin-left-10">
          <cm-button type="primary" :cm-style="{ width: '96px' }" :disabled="smsColdTimeLeft > 0" @click="smsHandler">{{ smsButtonText }}</cm-button>
        </view>
      </view>
      <cm-validator cm-class="cm-margin-top-5" validate-key="mobile" name="手机号"
        :validate-data="form.mobile" not-null validate="mobile" @validate="validateHandler"></cm-validator>
      
      <cm-input v-model="form.verifyNum" type="number"
        cm-class="cm-margin-top-10" border="black" placeholder="请输入6位验证码">
        <view class="cm-flex-s-0" style="width: 50px;">验证码</view>
      </cm-input>
      <cm-validator ref="verifyNumValidator" cm-class="cm-margin-top-5" validate-key="verifyNum" name="验证码"
        :validate-data="form.verifyNum" not-null @validate="validateHandler"></cm-validator>
      
      <view v-if="isFirstBind">
        <view class="cm-text-14 app-text-color-grey cm-margin-top-20">
          首次绑定手机需要设置登录密码
        </view>
        <cm-input v-model="form.password" clearable @clear="form.password = ''"
          password cm-class="cm-margin-top-20" border="black" placeholder="请输入登录密码">
          <view class="cm-flex-s-0" style="width: 70px;">登录密码</view>
        </cm-input>
        <cm-validator ref="passwordValidator" cm-class="cm-margin-top-5" validate-key="password" name="密码"
          :validate-data="form.password" not-null @validate="validateHandler"></cm-validator>
        <cm-input v-model="form.comfirmPwd" clearable @clear="form.comfirmPwd = ''"
          password cm-class="cm-margin-top-10" border="black" placeholder="请重复输入密码">
          <view class="cm-flex-s-0" style="width: 70px;">确认密码</view>
        </cm-input>
        <cm-validator ref="confirmValidator" cm-class="cm-margin-top-5" validate-key="comfirmPwd" name="密码"
          :validate-data="form.comfirmPwd" not-null @validate="validateHandler"></cm-validator>
      </view>

      <view class="cm-text-14 app-text-color-grey cm-margin-top-20">
        手机号是用户的唯一凭证，绑定手机号的用户可以在多平台统一账户信息
      </view>
      <cm-button cm-class="cm-margin-top-20" type="primary" @click="bindHandler">确定</cm-button>
    </view>
  </view>
</template>

<script src="./bindMobile.js"></script>

<style lang="stylus">
@import './bindMobile.styl'
</style>
